<template>
	<view style="min-height: 100vh;background: white;">
		<view style="padding: 40upx 56upx;">
			<view class="shareTxt">
				<view class="shareTxtT">
					{{shareTxt}}
				</view>
				<view class="shareTxtB" @click="copyStr">复制文案</view>
			</view>
			<view class="shareImg">
				<view class="shareImgItem" :style="{'background-image': 'url('+item.url+')'}" v-for="(item,index) in imgArrs" :key="index" @click="choiceImg" :data-index="index">
					<view v-if="item.flag">
						<image src="../../static/mine/right_white.png"></image>
					</view>
				</view>
			</view>
			<view class="savePhoto" @click="saveImg">保存素材图片至相册</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				imgArr:[],
				shareTxt:"",
				saveArr:[],
				imgArrs:[]
			}
		},
		onLoad() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			let arr = uni.getStorageSync("materialData").imgArr;
			this.imgArr = uni.getStorageSync("materialData").imgArr;
			this.imgArrs = arr;
			/**
			// #ifdef MP-WEIXIN
			wx.getFileSystemManager().readFile({
			  filePath: arr[0].url, //选择图片返回的相对路径
			  encoding: 'base64', //编码格式
			  success: res => { //成功的回调
				arr[0].url = 'data:image/png;base64,' + res.data;
				this.imgArrs = arr;
			  }
			})
			// #endif
			// #ifdef APP
			app.$vm.getImgBase(this.getImage(arr[0].url)).then(res=>{
				arr[0].url = res;
				this.imgArrs = arr;
			})
			// #endif
			**/
			this.shareTxt = uni.getStorageSync("materialData").shareTxt;
		},
		methods: {
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			copyStr(){
				uni.setClipboardData({
					data:this.shareTxt
				})
			},
			choiceImg(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = this.imgArr[index];
				obj.flag = !obj.flag;
				this.imgArr.splice(index,1,obj);
			},
			saveImg(){
				let arr = [];
				for(let i=0;i<this.imgArr.length;i++){
					if(i!=0&&this.imgArr[i].flag){
						arr.push(this.getImgInfo(this.imgArr[i].url));
					}
				}
				let pArr = [];
				if(this.imgArr[0].flag){
					pArr.push(this.imgArr[0].url)
				}
				Promise.all(arr).then(rel=>{
					console.log(arr)
					pArr = pArr.concat(rel);
					this.saveArr = pArr;
					uni.showLoading({
						title:"保存中..."
					})
					console.log(this.saveArr)
					this.saveFun(0);
				})
				
			},
			saveFun(ind){
				let _this = this;
				console.log(this.saveArr[ind])
				uni.saveImageToPhotosAlbum({
					filePath: this.saveArr[ind],
					success: function() {
						console.log("````````````",ind,_this.saveArr.length-1,(ind<_this.saveArr.length-1));
						if(ind<_this.saveArr.length-1){
							_this.saveFun(ind+1);
						}else{
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
							});
						}
					},
					fail:err=>{
						console.log(err,ind)
					}
				});
			},
			getImgInfo(url){
				return new Promise((resolve,reject)=>{
					uni.downloadFile({
						url:url,
						success:res=>{
							resolve(res.tempFilePath)
						},
						fail:err=>{
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
	.savePhoto{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		border-radius: 44upx;
		background: #FFAC3F;
		margin-top: 62upx;
		color: white;
		font-size: 28upx;
	}
	.shareImgItem>view{
		position: absolute;
		top: 12upx;
		right: 12upx;
		width: 36upx;
		height: 36upx;
		background: #FFAC3F;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.shareImgItem>view>image{
		width: 20upx;
		height: 20upx;
	}
	.shareImg{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.shareImgItem{
		width: 194upx;
		height: 194upx;
		margin-right: 28upx;
		border-radius: 8upx;
		box-sizing: border-box;
		border: 4upx solid #FFAC3F;
		position: relative;
		background-size: cover;
		background-position: center;
		margin-top: 28upx;
	}
	.shareImgItem:nth-child(1),
	.shareImgItem:nth-child(2),
	.shareImgItem:nth-child(3){
		margin-top: 0;
	}
	.shareImgItem:nth-child(3n+3){
		margin-right: 0;
	}
	
	
	.shareTxt{
		width: 100%;
		border-radius: 8upx;
		background: #F5F5F5;
		margin-bottom: 56upx;
	}
	.shareTxtT{
		width: 100%;
		box-sizing: border-box;
		padding: 24upx 30upx;
		font-size: 28upx;
		line-height: 40upx;
		border-bottom: 2upx solid #EFEFEF;
		word-break: break-all;
	}
	.shareTxtB{
		width: 100%;
		height: 76upx;
		line-height: 76upx;
		text-align: center;
		color: #FFAC3F;
		font-size: 28upx;
	}
</style>
